<template>
    <div class="meter">
        <div class="select-box">
            <div v-if="selected">
                <span @click="select" style="cursor: pointer;font-size: 14px">选择</span> 
            </div>
            <div v-else>
                <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <el-link class="delete" type="danger" :underline="false" @click="deleted">删除</el-link>
            </div>
        </div>
        <ul class="music-list">
            
            <li v-for="item in bgList" :key="item.id">
                <img :src="item.image" alt="" srcset="">
                <span>{{ item.portraitName }}</span>
                <el-checkbox v-if="showCheckbox" v-model="item.isChecked" @change="statusChange"></el-checkbox>
                <p v-if="!item.isActive">设为当前形象</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'SetControlPortrait',
    data() {
        return {
            selected: true,
            checkAll: false,
            showCheckbox: false,
            bgList: [
                { id: 1, portraitName: '小H', image: require('./speech_h.png'), isChecked: false, isActive: false },
                { id: 2, portraitName: '声线', image: require('./speech_ sound_ray .png'), isChecked: false, isActive: false },
                { id: 3, portraitName: 'Hand', image: require('./speech_hand.png'), isChecked: false, isActive: false }
            ]
        }
    },
    methods: {
        select(){
            this.selected = false
            this.showCheckbox = true
        },
        handleCheckAllChange(){
            
        },
        deleted(){
            this.selected = true
            this.showCheckbox = false
        },
        statusChange(){

        },
    }
}
</script>

<style lang="scss" scoped>
.meter{
    .select-box{
        height: 40px;
        line-height: 40px;
    }
    .music-list{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        li{
            position: relative;
            width: 184px;
            height: 177px;
            margin: 8px;
            box-sizing: border-box;
            margin-right: 12px;
            background-color: #000;
            text-align: center;
            &:nth-of-type(1){
                .el-checkbox{
                    display: none;
                }
            }
            img{
                width: 100%;
                height: 100%;
            }
            span{
                position: absolute;
                color: #ffffff;
                font-size: 14px;
                left: 18px;
                top: 18px;
            }
            .el-checkbox{
                position: absolute;
                right: 18px;
                top: 18px;
            }
            p{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                color: #ffffff;
                font-size: 12px;
                width: 108px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                border: 1px solid #fff;
                border-radius: 14px;
                opacity: 0;
                cursor: pointer;
                transition: all .5s;
            }
            &:hover{
                p{
                    opacity: 1;
                    transition: all .5s;
                }
            }
        }
    }
}
.active{
    display: none;
}
</style>

